<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        body{
            padding-bottom: 800px;
        }
        .rate-box .iconfont{
            font-size: 40px;
            cursor: pointer;
            padding: 0px 4px;
            cursor: pointer;
            color: #ccc;
            vertical-align: middle;

        }
        .rate-box .iconfont.active{
            color: goldenrod;
        }
        .rate-box .source{
            font-size: 40px;
            padding-left: 20px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>v-for ：基于可循环变量或结果，完成元素的循环创建或删除</h4>
        <p>v-for指令中可以使用 Array | Object | number | string | Set 进行循环创建元素 </p>
        <ol>
            <li> v-for=" 自定义变量名 in 被循环的变量或结果 " </li>
            <li> v-for=" (自定义变量名1,自定义变量名2) in 被循环的变量或结果 " </li>
            <li> v-for=" (自定义变量名1,自定义变量名2,自定义变量名3) in 被循环的变量或结果 " </li>
        </ol>
        <p>自定义变量名：在v-for指令定义时，由开发者自行描述变量名称，用于记录循环过程中产生的循环对应值</p>
        <p>被循环的变量或结果：使用是存储于vue数据仓库的数据变量，或者通过运算得到的数据结果</p>
        <p>!!! 自定义循环变量，在v-for指令的循环范围内，可以直接被作为一个局部的 仓库变量进行使用</p>
        <hr>
        <h5>Array 循环</h5>
        <!-- 
            Array 使用 v-for 循环，会在循环时产生 两个 循环变量:数组元素值 和 元素下标
                v-for=" item in Array "    item 数组循环的元素值 
                v-for=" (item,index) in Array "   index 数组循环的下标
        -->
        <ul>
            <li v-for=" c in citys ">
                <span style="color:red"> {{ c }} </span>
            </li>
        </ul>
        <!-- <p>选择的城市:{{ city }}</p> -->
        <p>选择的城市:{{ num }}>=>{{ citys[num] }}</p>
        <!-- <select @change=" city=$event.target.value "> -->
        <select @change=" num=$event.target.value ">
            <option value="">请选择</option>
            <option v-for=" (c,i) in citys " :value="i">{{ i }}-{{ c }}</option>
        </select>
        <hr>
        <h5>Object 循环</h5>
        <!-- 
            Object 使用 v-for 循环，会在循环时产生 两个 循环变量:对象的value值 和 对象的key值
                v-for=" item in Object "    item 对象的value值 
                v-for=" (item,key) in Object "   key 对象的key值
                v-for=" (item,key,count) in Object "   count 从0开始的循环计数器
        -->
        <ul>
            <li v-for=" item in stu ">{{ item }}</li>
        </ul>
        <ul>
            <li v-for=" (item,k) in stu ">{{ k }} : {{ item }}</li>
        </ul>
        <ul>
            <li v-for=" (item,k,c) in stu ">{{ c }} : {{ k }} : {{ item }}</li>
        </ul>

        <hr>
        <h5>Number 循环 = 计数循环|限制循环次数 ==> 【 1.开发阶段的静态页面效果生成 】【2.项目中功能静态元素的生成】</h5>
        <!-- 
            v-for=" c in Number "    c 从1开始的累加值
            v-for=" (c,i) in Number "   i 从0开始的计数值
        -->
        <ul>
            <li v-for=" (c,i) in 3 " >{{ c }} : 元素 : {{ i }}</li>
        </ul>
        <div class="rate-box">
            <span class="iconfont icon-collection-b"
                :class=" { active:source>=c } "
                v-for=" c in 5 "
                @click=" source = c"
            ></span>
            <span class="source">{{ source.toFixed(1) }}</span>
        </div>
        <hr>
        <h5>string 循环 = 对字符串的每个字符进行取值</h5>
        <ul>
            <li v-for=" (c,i) in 'abcdefg' ">{{ i }} : {{ c }}</li>
        </ul>
        <h5>set 循环</h5>
        <!-- 
            Set 使用 v-for 循环，会在循环时产生 两个 循环变量:set元素值 和 指令提供的计数器
                v-for=" item in Array "    item set循环的元素值 
                v-for=" (item,index) in Array "   从0开始的计数器
        -->
        <ul>
            <li v-for=" item in names ">{{ item }}</li>
        </ul>
        <ul>
            <li v-for=" (item,i) in names ">{{ item }} : {{ i }}</li>
        </ul>
        <hr>
        <h5>数组拆分循环</h5>
        <ul>
            <!-- 在不改变原数组取值的情况下，只循环前3个 -->
            <li v-for=" c in citys.slice(0,3) ">{{ c }}</li>
        </ul>
    </div>
    <script src="../assets/mock/mock-min.js"></script>
    <script type="module"> 
    let c = 0;
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    citys:Mock.mock({
                        "list|5":[ "@city" ]
                    }).list,
                    city:"",
                    num:"",
                    stu:{
                        name:"jack",
                        age:23,
                        sex:"男"
                    },
                    source:0,
                    names:new Set(Mock.mock({
                        "list|5":[ "@cname" ]
                    }).list)
                }
            }
        }).mount("#app")
    </script>
</body>
</html>